<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12">
          <!--<el-button type="primary" style="width:118px;height:40px" @click="addClusterShowDia" icon="el-icon-plus">添加集群</el-button>-->
          <el-select clearable style="width:118px;height:40px;" v-model="value" placeholder="请选择" @change="operation">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12" class="ecs_col">
          <el-row>
            <el-col :span="8" style="margin:0 10px 0 -10px">
              <el-input v-model="queryParam.name" clearable placeholder="请输入搜索内容"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="queryCluster">搜索</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="searchVisible =!searchVisible">高级搜索<i :class="[!searchVisible?adv_sty_hide : adv_sty_show]" /></el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" style="margin-top:10px">
          <advQuery :searchVisible="!searchVisible" :runStates="runStates" @advQuery="queryCluster" :inputHolder="inputHolder"></advQuery>
        </el-col>
      </el-row>
      <el-row class="cluster_list_row">
        <el-table
          @selection-change="handleSelectionChange"
          :data="data.records"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#FAFAFA'}">
          <el-table-column align="center"
            type="selection"
            prop="id"
            width="55">
          </el-table-column>
          <el-table-column align="center"
            prop="name"
            label="集群名称"
            sortable
            width="180">
            <template slot-scope="scope">
              <router-link :to="queryDetail(scope.row.clusterCode)">{{scope.row.name}}</router-link>
            </template>
          </el-table-column>
          <el-table-column align="center"
            prop="webUrl"
            label="访问地址"
            sortable
            width="180">
          </el-table-column>
          <el-table-column align="center"
            prop="state"
            sortable
            label="运行状态">
            <template slot-scope="scope">
              <div style="margin-left:-20px" :class="[scope.row.state =='ACTIVE'?'nodeNumStyitem1' : 'nodeNumStyitem2']"/>{{parseState(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column align="center"
            prop="version"
            sortable
            label="版本">
            <template slot-scope="scope">
              {{scope.row.version}} <span @click="upgrade(scope.row)" style="padding-left:10px;cursor : pointer;color:#43A5F3 ">升级</span>
            </template>
          </el-table-column>
          <el-table-column style="width:100%" align="center"
            prop="typeNodeNum"
            sortable
            label="节点">
            <template slot-scope="scope">
              <div class="nodeNumStyitem1"/>{{scope.row.typeNodeNum.split(",")[0]}}
              <div class="nodeNumStyitem2"/>{{scope.row.typeNodeNum.split(",")[1]}}
              <div class="nodeNumStyitem3"/>{{scope.row.typeNodeNum.split(",")[2]}}
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog title="添加集群" :visible.sync="addCluterDiaVisable" top="292px" width="820px" @closed="addCluaterClose">
        <el-form :model="addClusterObj" status-icon :rules="rules" ref="addClusterObj" label-width="100px" class="addClusterForm">
          <el-row>
            <el-col :span="5">
              <el-form-item label="名ㅤㅤ称:" prop="name">
                <el-input maxlength="250" class="add_clu_input" clearable v-model="addClusterObj.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="padding-left:60px">
            <el-col :span="5">
              <el-form-item label="节点配置:" prop="ecsId">
                <el-select style="width:117px;" v-model="addClusterObj.ecsId" placeholder="请选择主机">
                  <el-option v-for="item in hosts" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 20px;">
              <el-form-item label="角色:" prop="nodeType">
                <el-select style="width:90px;" clearable v-model="addClusterObj.nodeType" placeholder="请选择角色">
                  <el-option v-for="item in nodeTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 10px;">
              <el-form-item label="节点数:" prop="nodeNum">
               <el-input maxlength="2" v-model.number="addClusterObj.nodeNum" style="width:82px;" clearable placeholder="请输入节点数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: -10px;">
              <el-form-item label="端口:" prop="port">
                <el-input maxlength="99" v-model.trim="addClusterObj.port" style="width:90px;" clearable  placeholder="请输入端口"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="1"><i @click="addNode(addClusterObj)" class="jiahao iconfont icon-icon_tianjia"></i></el-col>
          </el-row>

          <el-row style="padding-left:60px" v-for="(item,index) in addNodes" :key="index">
            <el-col :span="5">
              <el-form-item label="节点配置:" prop="ecsId">
                <el-select style="width:117px;" disabled v-model="item.ecsId">
                  <el-option v-for="item in hosts" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 20px;">
              <el-form-item label="角色:" prop="nodeType">
                <el-select style="width:90px;" disabled v-model="item.nodeType">
                  <el-option v-for="item in nodeTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 10px;">
              <el-form-item label="节点数:" prop="nodeNum">
               <el-input readonly v-model="item.nodeNum" style="width:82px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: -10px;">
              <el-form-item label="端口:" prop="port">
                <el-input readonly v-model="item.port" style="width:90px;"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="1"><i @click="delNode(index)" class="shanchu iconfont icon-shanchu"></i></el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="安装方式:" prop="upgradeWay">
                <el-select class="add_clu_input" style="width:90px;" v-model="addClusterObj.upgradeWay" placeholder="请选择安装方式">
                  <el-option v-for="item in upgradeWays" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item :label="addClusterObj.upgradeWay==2?'安 装 包 :':'版 本 号 :'" prop="sysFileId">
                <el-select class="add_clu_input" style="width:90px;" v-model="addClusterObj.sysFileId" :placeholder="addClusterObj.upgradeWay==2?'请选择安装包':'请选择版本号'">
                  <el-option v-for="item in sysFileIds" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div class="add_clu_txt">注：单个端口   例：223 <br>
              ㅤㅤ多个端口用“；”分隔： 例：223；224 <br>
              ㅤㅤ多个端口段用“/”分隔： 例：223/228</div>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item>
                <el-button @click="addCluterDiaVisable=false">取消</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="addClusterSave('addClusterObj',addClusterObj)">确认</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog :visible.sync="dialogVisible" v-model="dialogVisible" title="提示" width="540px" @closed="closeDelDia">
        <span>确认删除此集群?</span>
        <template #footer>
          <div class="adv_del">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="delClusters">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import advQuery from '../../components/advQuery/advQuery.vue'
import {doGet, doPost,doDel} from '@/api/index.js'
import '../../assets/iconfont/iconfont.css';
  export default {
    components:{
      advQuery
    },
    props: ['hostId'],
    name: 'cluster-list',
    data () {
      return {
        dialogVisible:false,
        hosts:[
          {
            id:"1",
            name:"12"
          }
        ],
        sysFileIds:[
          {
            label:'1.4.0',
            value:1
          }
        ],
        nodeTypes:[
          {
            label:'工作节点',
            value:'WORKER_NODES'
          },
          {
            label:'协调节点',
            value:'COORDINATOR'
          }
        ],
        upgradeWays:[{label:'在线',value:'1'},{label:'离线',value:'2'}],
        rules: {
                name: [{required: true, message:'请输入名称', trigger: 'blur'}],
                ecsId: [{required: true, message:'请选择主机', trigger: 'change'}],
                nodeType:[{required: true,message:'请选择角色',trigger:'change'}],
                nodeNum:[{required: true,type:'number',message:'请输入节点数',trigger:'blur'}],
                port:[{required: true,message:'请输入端口号',trigger:'blur'}],
                upgradeWay:[{required: true,message:'请选择安装方式',trigger:'blur'}],
                sysFileId:[{required: true,message:'请选择',trigger:'blur'}],
            },
        addNodes:[],
        addClusterObj:{
          name:'',
          upgradeWay:'',
          sysFileId:'',
          code:'',
          ecsId:'',
          nodeType:'',
          nodeNum:'',
          port:''
        },
        addCluterDiaVisable:false,
        inputHolder:["请输入集群名称","请输入访问地址","请选择运行状态"],
        adv_sty_show:"iconfont icon-xiangxiazhanhang",
        adv_sty_hide:"iconfont icon-xiangshangzhanhang",
        searchVisible:true,
        queryParam: {name:''},
        runStates: [{
          value: 'ACTIVE',
          label: '运行中'
        }, {
          value: 'INACTIVE',
          label: '空闲'
        }, {
          value: 'SHUTTING_DOWN',
          label: '关闭'
        }],
        options: [{
          value: 'more',
          label: '请选择'
        }, {
          value: 'del',
          label: '删除'
        }, {
          value: 'add',
          label: '添加'
        }],
        value: 'more',
        data: {
          total: 0,
          pageNo: 1,
          records:[],
          pageSize:10
        },
        clusterCodes:[],
      }
    },
    mounted(){
      this.initQuery(this.hostId);
    },
    methods: {
      queryDetail (clusterCode) {
        return {path: '/cluster-detail', query: {clusterCode: clusterCode}}
      },
      upgrade(row){

      },
      delClusters(){
        let url="/sys_openlookeng_cluster/batchDelCluster";
        doDel(url,this.clusterCodes).then(res=>{
          if(res.data.code===0){
            this.dialogVisible=false;
            this.$message.success(res.data.msg);
            this.initQuery(this.hostId);
          }
        });
      },
      closeDelDia(){
        this.value=this.options[0].value;
      },
      handleSelectionChange(val){
        this.clusterCodes=[];
        val.forEach(item => {
          this.clusterCodes.push(item.clusterCode)
        });
      },
      operation(e){
        if(this.clusterCodes.length==0 && e=="del"){
          this.value=this.options[0].value;
          return this.$message.error("请先选择需要删除节点!");
        }
        if(e=="del"){
           this.dialogVisible=true;
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.addNodes=[];
        this.addClusterObj={};
      },
      delNode(index){
        this.addNodes.splice(index,1);
      },
      addNode(obj){
        if(!obj.ecsId || !obj.nodeType || !obj.nodeNum || !obj.port){
         return this.$message("请先补充完整需要添加的节点属性!");
        }
        let port = obj.port.split(",");
        if(port.length != obj.nodeNum){
          return this.$message("节点数与端口号数量不一致,请重新输入");
        }
        let addObj={
          ecsId:obj.ecsId,
          nodeType:obj.nodeType,
          nodeNum:obj.nodeNum,
          port:obj.port
        }
        this.addNodes.push(addObj);
      },
      parseState(row,column){
        return this.runStates.filter(item=>item.value == row.state)[0].label;
      },
      addClusterShowDia(){
        this.addCluterDiaVisable=true;
      },
      addClusterHideDia(){
        this.addCluterDiaVisable=false;
      },
      addClusterSave(ruleName,obj){
        this.$refs[ruleName].validate((valid) => {
              if (valid) {
                  if(this.addNodes.length==0){
                    return this.$message({type:'error',message:"集群节点不能为空!"});
                  }
                  let url="/sys_openlookeng_cluster/insertCluster";
                  let addNodeList=[];
                  addNodeList=JSON.parse(JSON.stringify(this.addNodes))
                  addNodeList.forEach(item=>{
                    item.port = item.port.split(",");
                  })
                  let addObj={
                    type:1,
                    name:obj.name,
                    upgradeWay:obj.upgradeWay,
                    sysFileId:obj.sysFileId,
                    dtos:addNodeList,
                  }
                  doPost(url,addObj).then(res=>{
                    if(res.data.code===0){
                      this.$message.success(res.data.msg);
                      this.addClusterHideDia();
                      this.initQuery(this.hostId);
                    }
                  });
              } else {
                return false;
              }
        });
      },
      addCluaterClose(){
        this.resetForm('addClusterObj');
      },
      initQuery(id){
        let url="/sys_openlookeng_cluster/page";
        let obj={
          pageNo:this.data.pageNo,
          pageSize:this.data.pageSize,
          ecsId:id,
          type:1
        }
        doPost(url,obj).then(res=>{
          if(res.data.code===0){
            this.data.records=res.data.data.records;
            this.data.total=res.data.data.total;
          }
        });
      },
      queryCluster(obj){
        let url="/sys_openlookeng_cluster/page";
        let queryObj={
          pageNo:this.data.pageNo,
          pageSize:this.data.pageSize,
          type:1,
          name:this.queryParam.name?this.queryParam.name:obj.ip?obj.ip:'',
          runState:obj.runState?obj.runState:'',
          address:obj.serviceIp?obj.serviceIp:'',
        }
        doPost(url,queryObj).then(res=>{
          if(res.data.code===0){
            this.data.records=res.data.data.records;
            this.data.total=res.data.data.total;
          }
        });
      },
      handleSizeChange (val) {
        this.data.pageSize=val;
      },
      handleCurrentChange (val) {
        this.data.pageNo=val;
      },
      tableRowClassName ({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      }
    },
  }
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
